<template>
  <div class="box">
    <div class="top">
      <div class="hotCity" v-for="(item,index) in citys" :key='index'>
            <span>{{item.type}}</span>
            <span class="el-icon-arrow-right"></span>
            <div class="submenu">
                <ul>
                  <li v-for="(item,index) in item.children" :key='index'>
                    <span>{{index+1}}</span>
                    <span>{{item.city}}</span>
                    <span>{{item.desc}}</span>
                  </li>
                </ul>
            </div>
      </div>
    </div>
    <div class="bottom">
        <div class="city">推荐城市</div>
        <img src="http://img3.imgtn.bdimg.com/it/u=377660580,536654703&fm=26&gp=0.jpg" alt="">
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        citys:[]
      }
    },
    mounted(){
        this.$axios({
          url:'/posts/cities'
        }).then(res=>{
          const{data}=res.data;
          console.log(data)
          this.citys=data
        })
    }
}
</script>

<style lang="less" scoped>
.box{
  height: 100%;
  margin-top: 20px;
  .top{
      width: 260px;
      position: relative;
      .hotCity{
          display: flex;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;
          border: 1px solid #ddd;
          padding: 0 20px;
          font-size: 14px;
          .el-icon-arrow-right{
              display: block;
              line-height: 40px;
          }
          .submenu {
            display: none;
            li{
              line-height: 35px;
              margin-left: 20px;
            }
            span{
                &:nth-child(1){
                  color: orange;
                  font-size: 24px;
                }
                &:nth-child(2){
                  color: orange;
                  margin:0 5px;
                }
                &:nth-child(3){
                  color: #999;
                }
              }
          }
          &:hover{
            color: red;
            border-right: none;
            .submenu {
              display: block;
              color: black;
            }
          }
    }
    .submenu{
        position: absolute;
        top: 0;
        left:260px;
        border:1px solid #ddd;
        border-left: none;
        height: 200px;
        line-height: 40px;
        width: 350px; 
        background-color: #fff;
        z-index: 2;
    }

    
  }
  .bottom{
    width: 260px;
    .city{
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      padding: 10px 0 0 0;
      font-size: 16px;
      margin-bottom: 10px;
    }
    img{
      width: 100%;
    }
  }
}
  
    

</style>